<!--  -->
<template>
  <!-- 通用设置 -->
  <div class="conent-box">
    <h1 class="title-con">通用管理</h1>
    <div class="conter-text">
      <p>
        待付款订单取消时间：拍下未付款订单
        <span>
          <input type="text" value="60" class="time-inp" v-model="dingdang" />
        </span>
        分钟内未付款，自动取消订单
      </p>
      <p>
        累计消费满
        <span>
          <input type="text" value="100.00" class="selected" v-model="leiji" />
        </span>
        元，升一级；最高
        <span>
          <input type="text" value="11" class="time-inp" v-model="maxji" />
        </span>
        级
      </p>
      <p>
        每
        <span>
          <input type="text" value="100" class="selected" v-model="zhekou" />
        </span>
        积分可抵扣
        <span>
          <input type="text" value="10" class="time-inp" v-model="jifen" />
        </span>
      </p>

      <el-button @click="open1" class="btn">
        <i class="el-icon-s-claim"></i>
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    //这里存放数据
    return {
      dingdang: "",
      leiji: "",
      maxji: "",
      zhekou: "",
      jifen: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    open1() {
      this.$notify({
        title: "成功",
        message: "保存成功",
        type: "success",
      });
      let arr = [
        {
          dingdang: this.dingdang,

          leiji: this.leiji,

          maxji: this.maxji,

          zhekou: this.zhekou,

          jifen: this.jifen,
        },
      ];

      localStorage.setItem("keynum", JSON.stringify(arr));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let val = eval("(" + localStorage.getItem("keynum") + ")");
    if (val) {
    val=val[0]
    
      console.log(val.dingdang);

      this.dingdang = val.dingdang;
      this.leiji = val.leiji;
      this.maxji = val.maxji;
      this.zhekou = val.zhekou;
      this.jifen = val.jifen;
    } else {
      this.dingdang = 60;
      this.leiji = 100.0;
      this.maxji = 11;
      this.zhekou = 100;
      this.jifen = 10;
    }
  },
};
</script>
<style  scoped>
.title-con {
  color: rgb(145, 55, 243);
  font-size: 24px;
  line-height: 70px;
  width:100%;
  margin-left:20px;
}
.main {
  width: 100%;
  height: 100%;
}
.conent-box {
  margin: 0 auto;
  width: 1140px;
  height: 100%;
}
.conter-text {
  position: relative;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  height: 474px;
  border: 1px solid #ccc;
  padding: 72px 48px;
}
.conter-text > p {
  line-height: 50px;
  height: 50px;
}
.time-inp {
  max-width: 42px;
  height: 35px;

  line-height: 35px;
  text-align: center;
}
input:focus {
  outline: none;
  border: 1px solid rgb(145, 55, 243);
}
input {
  border-radius: 4px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 0 5px;
}
.selected {
  width: 114px;
  height: 35px;
}
.btn {
  width: 98px;
  height: 36px;
  background: rgb(145, 55, 243);
  border: none;
  text-align: 16px;
  border-radius: 6px;
  color: #fff;
  outline: none;
  position: absolute;
  bottom: 90px;
  left: 50%;
  margin: -48px;
  cursor: pointer;
}
</style>